<script>
export default {
  name: 'SelfBox',
  props: ['info', 'to'],
  functional: true,
  render(createElement, context) {
    const { props, data } = context
    const { info, to } = props
    const rootStaticClass = 'self-box' + (data.staticClass ? (' '+data.staticClass) : '')
    return (
      <div class={ rootStaticClass }>
        <router-link class="box-insert" tag="div"
        style={{backgroundImage: `url(${info.backgroundImage})`}} to={to}>
          <span>{info.insert}</span> 
        </router-link>
        <div class="box-outsert">
          {info.outsert}
        </div>
      </div>      
    )
  }
}
</script>

<style lang="less">
  .self-box {
    margin: 1rem 0;
    .box-insert {
      position: relative;
      box-sizing: border-box;
      // padding: 0.5rem;
      background-size: cover;
      background-position: center;
      border-radius: 5px;
      color: white;
      overflow: hidden;
      background-color: black;
      span {
        width: calc(100% - 1rem);
        position: absolute;
        left: 0.5rem;
        top: 0.5rem;
        text-transform: capitalize;
      }
    }

    .box-outsert {
      line-height: 2.5rem;
      line-height: 1.25rem;
      overflow: hidden;
    }
  }
</style>